<template>
    <el-menu
      :default-active="activeIndex"
      class="nav-menu"
      mode="horizontal"
      router
      @select="handleSelect"
    >
      <el-menu-item index="/">首页</el-menu-item>
      <el-menu-item index="/elog">日志控制台</el-menu-item>
      <el-menu-item index="/erole">角色树</el-menu-item>
      <el-menu-item index="/erole/json">角色JSON视图</el-menu-item>
      <el-menu-item index="/rexec">远程执行</el-menu-item>
      <el-menu-item index="/box_chess">五子棋</el-menu-item>
      <el-menu-item index="/format_script">脚本格式化</el-menu-item>
      <el-menu-item index="/brackets_highlight">括号高亮</el-menu-item>
      <el-menu-item index="/momo_search">MOMO搜索</el-menu-item>
      <el-menu-item index="/script_search">脚本搜索</el-menu-item>
      <el-menu-item index="/camp_show">活动可视化</el-menu-item>
    </el-menu>
  </template>
  
  <script setup lang="ts">
  import { ref } from 'vue'
  import { useRoute } from 'vue-router'
  
  const route = useRoute()
  const activeIndex = ref(route.path)
  
  const handleSelect = (key: string) => {
    activeIndex.value = key
  }
  </script>
  
  <style scoped>
  .nav-menu {
    padding: 0 20px;
  }
  </style>